<template>
  <div>
    <header>
      <slot-demo name="header"></slot-demo>
    </header>
    <div class="content">
      <div>我是默认插槽</div>
    </div>
    <footer>
      <slot-demo name="footer"></slot-demo>
    </footer>
  </div>
</template>

<script>
export default {};
</script>

<style>
.box .header {
  height: 100px;
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid red;
}
.box .content {
  height: 100px;
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid green;
}
.box .footer {
  height: 100px;
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border: 1px solid green;
}
</style>